<div class="panel panel-default" id="karyawan_form_panel">
	<div class="panel-heading">
		<h4 class="clearfix">
			<span class="left">Form Karyawan</span>
		</h4>
		<a href="#" class="minimize">Minimize</a>
	</div>
	<div class="panel-body">
		<ul id="karyawan_tab" class="nav nav-tabs pattern">
			<li class="active"><a href="#karyawan_umum" data-toggle="tab">Data Umum</a></li>
			<li><a href="#karyawan_pribadi" data-toggle="tab">Data Pribadi</a></li>
			<li><a href="#karyawan_kinerja" data-toggle="tab">Kinerja</a></li>
			<li><a href="#karyawan_jadwal" data-toggle="tab">Jadwal Kerja</a></li>
		</ul>
		<input type="hidden" id="user_id">
		<form class="form-horizontal" role="form" action="#" method="post" id="user_form">
			<div class="tab-content">
				<div class="tab-pane fade in active" id="karyawan_umum">
					<div class="row">
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Department</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Periode Jadwal Kerja</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">No. Kartu</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Jabatan</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">No. Sidik Jari</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Cuti Tahunan</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">No. Induk</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Tanggal Begabung</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Nama</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">P.I.N</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Nama Panggilan</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Otorisasi Mesin</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Group Kerja</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">TPP / Bulan</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
					</div>
				</div>
				<div class="tab-pane fade" id="karyawan_pribadi">
					<div class="row">
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">N.I.K</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">No. Telp.</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Gender</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">No. HP.</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">TTL</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Propinsi</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Alamat</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Warganegara</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Kota</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Jumlah Anak</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Kode Pos</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
						<div class="form-group col-sm-6">
							<label class="col-sm-4 control-label">Status Kepegawaian</label>
							<div class="col-sm-8"><input type="text" class="form-control"></div>
						</div>
					</div>
				</div>
				<div class="tab-pane fade" id="karyawan_kinerja">
					<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. </p>
				</div>
				<div class="tab-pane fade" id="karyawan_jadwal">
					<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master.</p>
				</div>
			</div>			
			<div class="form-group">
				<div class="text-center" style="margin-top:10px;">
					<button type="button" class="btn btn-default" id="user_save">Simpan</button>
					<button type="reset" class="btn btn-default" id="user_reset">Batal</button>
				</div>
			</div>
		</form>
	</div>
</div>
<div class="panel panel-default" id="karyawan_grid_panel">
	<div class="panel-heading">
		<h4 class="clearfix">
			<span class="left">Data Karyawan</span>
			<div class="panel-form right clearfix" action="#" style="top:0px;">
				<div class="navbar-form" role="search">
					<div class="form-group">
						<input type="text" class="span2" placeholder="Search" id="karyawan_search">
					</div>
					<button type="button" class="btn btn-default btn-xs" id="karyawan_add">Tambah Data</button>
				</div>
			</div>
		</h4>
		<a href="#" class="minimize">Minimize</a>
	</div>
	<div class="panel-body">
		<table id="karyawan_grid" class="display" cellspacing="0" width="100%">
			<thead>
				<tr>
					<th>Nama Karyawan</th>
					<th>Keterangan</th>
					<th>Aktif</th>
					<th></th>
					<th></th>
				</tr>
			</thead>
		</table>
	</div>
</div>

<script>
$(document).ready(function() {
	var karyawan_grid;
/* Inisialisasi Grid */
    karyawan_grid = $('#karyawan_grid').dataTable( {
		"bFilter":false,
		"bLengthChange" : false,
		"ordering" : false,
		"info" : false,
		"processing" : true,
		"serverSide" : true,
		"columns": [
            { "data": "karyawan_nama" },
            { "data": "karyawan_keterangan" },
            { "data": "karyawan_aktif" },
			{
				"targets": -1,
				"sWidth": 15,
				"data": null,
				"defaultContent": '<a task="update" href="#" title="Edit Data"><span class="glyphicon glyphicon-pencil"></span></a>'
			},
			{
				"targets": -1,
				"sWidth": 15,
				"data": null,
				"defaultContent": '<a task="delete" href="#" title="Delete Data"><span class="glyphicon glyphicon-trash"></span></a>'
			}
        ],
		"fnServerData": function ( sSource, aoData, fnCallback ) {
			aoData.push( { "name": "filter", "value": $('#karyawan_search').val() } );
			$.ajax({
				"dataType": 'json',
				"type": "POST",
				"url": "c_m_karyawan/data_list",
				"data": aoData,
				"success": fnCallback
			});
		}
	} );
	$('#karyawan_grid tbody').on( 'click', "a[task='delete']", function () {
		var tr = $(this).parents('tr');
		var data = karyawan_grid.fnGetData(tr);
		var konfirmasi = confirm("Apakah anda yakin untuk menghapus data ini ?");
		if(konfirmasi == true){
			$.ajax({
				url : 'c_m_karyawan/delete',
				method : 'post',
				data : { karyawan_id : data.karyawan_id },
				success : function(response){
					var res = $.parseJSON(response);
					if(res.Result=='OK'){
						$.showNotify('Success','Data berhasil dihapus','success','brocco-icon-check-alt');
						reset_form();
						karyawan_grid.fnDraw();
					}else{
						$.showNotify('Failure','Data gagal dihapus.');
					}
				}
			});
		}
    } );
	$('#karyawan_grid tbody').on( 'click', "a[task='update']", function () {
		var tr = $(this).parents('tr');
		var data = karyawan_grid.fnGetData(tr);
		$("#karyawan_id").val(data.karyawan_id);
		$("#karyawan_nama").val(data.karyawan_nama);
		$("#karyawan_keterangan").val(data.karyawan_keterangan);
		karyawan_form_panel.toggleMax();
    } );
	$.collapsiblePanel("#karyawan_grid_panel");
/* Akhir Inisialisasi Grid */
/* Inisialisasi Form */
	$("#karyawan_karyawangroup_id").select2();
	$('#karyawan_aktif').toggleButtons({
	    width: 160,
	    label: {
	        enabled: "Aktif",
	        disabled: "Tidak Aktif"
	    }
	});
	var karyawan_form_panel = $.collapsiblePanel("#karyawan_form_panel");
/* Akhir Inisialisasi From */
/* Fungsi */
	function reset_form(){
		$("#karyawan_id").val("");
		$("#karyawan_name").val("");
		$("#karyawan_password").val("");
		$("#karyawan_karyawangroup_id").select2("val", "");
		$("#karyawan_name").attr("disabled", false);
		karyawan_form_panel.toggleMin();
	}
	karyawan_form_panel.toggleMin();
	$("#karyawan_search").keyup(function(e){
		e.preventDefault();
		if(e.keyCode == 13){
			karyawan_grid.fnDraw();
		}
	});
	$("#karyawan_reset").click(function(){
		reset_form();
	});
	$("#karyawan_save").click(function(e){
		e.preventDefault();
		var params = new Object();
		params.karyawan_id=$('#karyawan_id').val();
		params.form_data=$('#karyawan_form').serializeObject();
		if(params.form_data.karyawan_aktif == 'on'){params.form_data.karyawan_aktif = 'y';}else{params.form_data.karyawan_aktif = 't';}
		params=JSON.stringify(params);
		$.ajax({
			url : 'c_m_karyawan/save',
			method : 'post',
			data : {params:params},
			success : function(response){
				var res = $.parseJSON(response);
				if(res.Result=='OK'){
					$.showNotify('Success','Data berhasil disimpan','success','brocco-icon-check-alt');
					reset_form();
					karyawan_grid.fnDraw();
				}else{
					$.showNotify('Failure','Data gagal disimpan.');
				}
			}
		});
	});
	$("#karyawan_add").click(function(){
		karyawan_form_panel.toggleMax();
	});
/* Akhir Fungsi */
});
</script>